<template>
	<view class="container" @reach-bottom="onReachBottom">
		<!-- 顶部导航 -->
		<myHeader title="提现记录" showBack />

		<!-- 提现记录列表 -->
		<view class="list-container">
			<block v-for="(item, index) in list" :key="index">
				<view class="list-item" @click="confirmReceipt(item.packageInfo)">
					<view class="item-left">
						<text class="item-title">提现</text>
						<text class="item-time">{{ formatDate(item.createTime) }}</text>
					</view>
					<view class="item-right">
						<text class="item-amount">{{lang == "zh" ? "¥" : "$"}}{{(item.price||0)/100}}</text>
						<text class="item-status" :class="{
						    'status-success': item.status === 11,  // 提现成功时添加此类
						    'status-failed': item.status === 21,   // 提现失败时添加此类
						    'status-pending': item.status === 0      // 处理中时添加此类（根据实际状态名调整）
						  }">{{item.statusName}}</text>
					</view>
				</view>
			</block>

			<!-- 加载中提示 -->
			<view v-if="isLoadingMore" class="loading-more">
				<text>加载中...</text>
			</view>

			<!-- 无更多数据提示 -->
			<view v-if="!hasMore && !isLoadingMore" class="no-more-data">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		formatDate
	} from "@/utils/util";
	import {
		withdrawRecords
	} from '@/api'

	export default {
		components: {
			myHeader
		},
		data() {
			return {
				list: [],
				lang: 'zh',
				page: {
					pageNo: 1, // 当前页码（首次加载为1）
					pageSize: 10, // 每页固定10条
					total: 0 // 总数据量
				},
				hasMore: true, // 是否有更多数据
				isLoading: false, // 是否正在加载（防止重复请求）
				isLoadingMore: false // 是否正在加载更多（区分首次加载）
			}
		},
		onLoad(options) {
			this.lang = options.lang || 'zh';
			this.getList(); // 首次加载数据
		},
		onReachBottom() {
			// 滚动到底部时加载更多
			if (this.hasMore && !this.isLoading) {
				this.loadMore();
			}
		},
		methods: {
			// 获取提现记录（通用方法）
			async getList() {
				this.isLoadingMore = true;

				if (!this.hasMore || this.isLoading) return;

				this.isLoading = true;
				try {
					const res = await withdrawRecords({
						pageNo: this.page.pageNo,
						pageSize: this.page.pageSize,
						lang: this.lang
					});

					this.list = [...this.list, ...res.list]; // 加载更多时追加数据
					// 更新分页状态
					this.page.total = res.total;
					// 加载更多：页码递增
					this.page.pageNo++;

					this.hasMore = this.list.length < res.total;

				} catch (error) {
					console.error('获取提现记录失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
					this.isLoadingMore = false;
				}
			},

			// 加载更多（独立方法，可选）
			loadMore() {
				this.getList(false);
			},

			formatDate(time, format) {
				return formatDate(time, format);
			},
			refresh() {
				this.page.pageNo = 1;
				this.list = [];
				this.isLoading = false;
				this.isLoadingMore = false;
				this.hasMore = true;
				this.getList();
			},
			confirmReceipt(packageInfo) {
				if (!packageInfo) {
					return;
				}
				if (wx.canIUse('requestMerchantTransfer')) {
					wx.requestMerchantTransfer({
						mchId: '1721805592',
						appId: wx.getAccountInfoSync().miniProgram.appId,
						package: packageInfo,
						success: (res) => {
							// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
							console.log('success:', res);
							this.refresh()
						},
						fail: (res) => {
							console.log('fail:', res);
						},
					});
				} else {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.info-list-wrap {
		padding: 16rpx 32rpx;
	}

	/* 整体容器 */
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #141a2e;
		padding-bottom: 30rpx;
	}

	/* 顶部导航 */
	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 30rpx;
		color: #4EC0FF;
		position: relative;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.placeholder {
		width: 40rpx;
	}

	/* 列表容器 */
	.list-container {
		padding: 0 30rpx;
	}

	/* 列表项 */
	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 添加阴影提升质感 */
	}

	.item-left {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.item-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.item-time {
		font-size: 26rpx;
		color: #A0A4B7;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
		/* 防止被压缩 */
		margin-left: 20rpx;
	}

	.item-amount {
		font-size: 34rpx;
		margin-bottom: 10rpx;
		font-weight: bold;
		color: #f85c02;
	}

	.item-status {
		font-size: 28rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.status-pending {
		color: #4EC0FF;
		background-color: #e6f4ff;
	}

	.status-failed {
		color: #FF6B4A;
		background-color: #fff0f0;
	}

	.status-success {
		color: #4CD964;
		background-color: #f0fff4;
	}

	/* 加载更多 */
	.loading-more {
		text-align: center;
		padding: 30rpx 0;
		color: #A0A4B7;
		font-size: 28rpx;
	}

	.no-more-data {
		text-align: center;
		padding: 30rpx 0;
		color: #A0A4B7;
		font-size: 28rpx;
	}
</style>